<template>
  <div class="early">
    <iu-header>
      <template #left>
        <img src="../../styles/logo.svg" alt="" style="width:40px" />
      </template>
      <template #title>
        异常预警管理
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="early-wrapper">
      <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
        <iu-card
          class="early-card"
          v-for="(item, index) in tableData"
          :key="index"
          @click.native="earlywarningDetail(item)"
        >
          <template #title>
            <div
              class="early-card-title"
              :class="{
                warning: item.alarmLevel === 3,
                error: item.alarmLevel === 5
              }"
            >
              {{ item.alarmLevelName }}
            </div>
          </template>
          <template #tip>
            <div class="early-card-tip" :class="'status' + item.status">
              <span>
              {{ statusData[+item.status] }}
              </span>
            </div>
          </template>
          <template #body>
            <div class="early-card-body">
              {{ item.content }}
            </div>
            <div class="early-card-department">
              {{ item.departmentName }}
            </div>
            <div class="early-card-bottom">
              {{ item.createTime | formatDate }}
            </div>
          </template>
        </iu-card>
      </mescroll-vue>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import EarlywarningDao from "@/daos/earlywarning_dao";
import iuCard from "@/components/common/card/index";
import iuHeader from "@/components/common/header/index";
import MescrollVue from "mescroll.js/mescroll.vue";

export default {
  name: "earlywrning",
  components: {
    Tab,
    TabItem,
    MescrollVue,
    iuCard,
    iuHeader
  },
  data() {
    return {
      showMore: false,
      tableData: [],
      alarmLevelData: ["", "信息", "", "警告", "", "事故"],
      statusData: [
        "",
        "待确认",
        "",
        "已确认",
        "",
        "误报",
        "",
        "",
        "",
        "已关闭"
      ],

      mescroll: null,
      mescrollUp: {
        // auto: false,
        callback: this.getMore,
        page: {
          num: 0,
          size: 10
        },
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
        noMoreSize: 5,
        toTop: {
          src: "./static/mescroll-totop.png",
          offset: 1000
        },
        onScroll: this.onScroll
      },
      position: "middle",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      store: {
        id: 0,
        scrollTop: 0,
        departmentName: "",
      }
    };
  },
  created() {},
  //返回首页的公共方法
  inject: ["backToHomepage"],
  // deactivated() {
  //   this.store.scrollTop = this.mescroll.getScrollTop();
  // },
  activated() {
    if (this.store.id) {
      this.getEarlywarningDetail(this.store.id);
    }
    // if (condition) {

    // }
    // this.getList();
    this.$nextTick(e => {
      this.mescroll.scrollTo(this.store.scrollTop, 0);
    });
  },
  computed: {
    user() {
      //如果在store里拿不到设备信息，就去本地储存拿，并写入store。
      if (!this.$store.state.user) {
        this.$store.commit(
          "saveUser",
          JSON.parse(localStorage.getItem("user"))
        );
      }
      return this.$store.state.user;
    }
  },
  methods: {
    init() {},
    onScroll(mescroll, y, isUp) {
      this.store.scrollTop = y;
    },
    getMore(page) {
      this.pageNum = page.num;
      // this.pageNum++;
      this.getList();
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    getList() {
      let params = {
        orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      EarlywarningDao.getEarlywarningList(params, res => {
        if (this.pageNum === 1) {
          this.tableData.splice(0, this.tableData.length);
        }
        if (res.content && res.content.length) {
          this.tableData.splice(
            (this.pageNum - 1) * this.pageSize,
            this.pageSize,
            ...res.content
          );
        }
        this.total = res.total;
        // this.showMore = !(!res.totalPages || this.pageNum === res.totalPages);
        this.$nextTick(() => {
          this.mescroll.endByPage(res.content.length, res.totalPages);
        });
      });
    },
    getEarlywarningDetail(id) {
      EarlywarningDao.getEarlywarningDetail(id, res => {
        if (res) {
          res.departmentName = this.store.departmentName;
          const index = this.tableData.findIndex(e => e.id === id);
          if (index !== -1) {
            this.$set(this.tableData, index, res);
          }
        }
      });
    },
    earlywarningDetail(item) {
      this.store.id = item.id;
      this.store.departmentName = item.departmentName;

      this.$router.push({
        name: "earlywarningDetails",
        query: {
          id: item.id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.early {
  height: 100%;
  background: #1b1c32;
  overflow-y: scroll;
}

.early-wrapper {
  padding: 0 16px 32px;
  height: 100vh;
  overflow: hidden;
  .early-card {
    margin-bottom: 16px;
    .early-card-title {
      color: #409eff;
      &.warning {
        color: #ffb62c;
      }
      &.error {
        color: #ff2c2c;
      }
    }
    .early-card-tip {
      display: flex;
      justify-content: flex-end;
      margin-right: -8px;
      span {
        padding: 2px 6px 4px;
        text-align: right;
        background-color: #292a4d;
        border-radius: 5px;
      }
      &.status1 {
        color: #f56c6c;
      }
      &.status3 {
        color: #409eff;
      }
      &.status5,
      &.status9 {
        color: gray;
      }
    }
    .early-card-body {
      margin: 8px 0;
    }
    .early-card-department {
      margin: 8px 0;
      color: rgba(255, 255, 255, 0.8);
    }
    .early-card-bottom {
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
